<template>
    <a-card :bordered="false">
      <a-input-search style="margin-bottom: 10px;width: 200px"
                      placeholder="输入流程名称" @search="onSearchProcess" />
    <a-button style="left: 10px"   @click="onSearchProcess(searchProcessKey)" type="primary">查询</a-button>
    <a-button style="margin-left: 8px;left: 10px"  @click="onSearchProcess('')">重置</a-button>
    <a-button @click="handleToApplyList" type="primary" style="float: right;">前往我的申请列表</a-button>       

      <a-collapse v-model:activeKey="activeKey2.data">
        <a-collapse-panel :key="value" v-for="(value, index)  in activeKeyAll.data" :header="filterDictText(dictOptions.data,value)||'未分类'" >
          <a-list :grid="{ gutter: 16, column: 4 }" :data-source="processDataMap.data[value]">
            <!-- <template   v-for="(item, index) in processDataMap.data[value]"> -->
              <template #renderItem="{ item }">
                <a-list-item>
              <a-card :title="item.name">
                <template #extra>
                  <a href="javascript:void (0)" @click="chooseProcess(item)">发起申请</a>
                </template>
                <p>版本：v.{{item.version}}</p>
                <br/>
                <p>说明：{{item.description}}</p>
              </a-card>
            </a-list-item>
            </template>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
      </a-card>
</template>

<script lang="ts" name="system-dict" setup>
 //ts语法
 import { ref, reactive,onMounted  } from 'vue';
 import { useRouter } from "vue-router";
  import { columns, searchFormSchema } from './applyHome.data';
  import { initDictOptions,filterDictText } from '/@/utils/dict';
  import { list,getProcessDataList,getFirstNode,applyBusiness} from './applyHome.api';
  //字典配置drawer

  const  activeKey2 = reactive({data:[]});
  const  dictOptions = reactive({data:[]});
  const  activeKeyAll = reactive({data:[]});
  const  processDataMap= reactive({data:{}});
  const searchProcessKey= ref('');
  const router = useRouter();
  //字典model
  // const [registerModal, { openModal }] = useModal();

  // 列表页面公共参数、方法
  //注册table数据

  onMounted(() => {
    initDictConfig();
    onSearchProcess('');
  })
  function initDictConfig() {
    //初始化字典 - 流程分类
    initDictOptions('bpm_process_type').then((res) => {
        dictOptions.data = res;
    });
  };
  function filterDictText(dictOptions, text) {
    if (dictOptions instanceof Array) {
      for (let dictItem of dictOptions) {
        if (text === dictItem.value) {
          return dictItem.text
        }
      }
    }
    return text||text=='null'?'':text
  };
  //查询
  function onSearchProcess(value) {
    searchProcessKey.value = value;
    getProcessList()
  };
  function getProcessList() {
    getProcessDataList({status:1,roles:true}).then(res=>{
      let result = res||[];
      if (result.length>0){
        activeKeyAll.data=[];
        activeKey2.data=[];
        processDataMap.data={};
        let skey = searchProcessKey.value;
        if (skey==""){ //过滤条件
          // result = _.filter(result, function(o) { return o.name.indexOf(searchProcessKey)>-1; });
          result = result.filter((o)=> { return o.name.indexOf(skey)>-1; });
        };
         
        //根据categoryId类型分组
        const aa=[...new Set(result.map(ps=>ps.categoryId))];
        activeKeyAll.data=aa;
        
        activeKey2.data=activeKeyAll.data;
        let dataContainer = {}; //存分组的
        result.map(item=>{
          dataContainer[item.categoryId]=dataContainer[item.categoryId] || [];
          dataContainer[item.categoryId].push(item);
        })
        processDataMap.data=dataContainer;
      }
    })
  };
  /*前往我的申请页面*/
  function handleToApplyList() {
    router.push("/activiti/ywsp/myApply");
      }
</script>

<style scoped>

</style>
